
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
    <title>Dynamic option creation | Select2 - The jQuery replacement for select boxes</title>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha256-7dA7lq5P94hkBsWdff7qobYkp9ope/L5LQy2t/ljPLo=" crossorigin="anonymous"></script>

  <!-- select2-bootstrap4-theme -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css"> <!-- for live demo page -->
    <link href="css/select2.min.css" type="text/css" rel="stylesheet" />
    <script src="js/select2.full.min.js" type="text/javascript" ></script>

</head>

<body>


<div class="s2-example">
    <select class="js-example-tags form-control"  multiple="multiple"> 
      <option selected="selected">orange</option>
      <option>white</option>
      <option>purple</option>
    </select>
</div>

<script type="text/javascript">
$(".js-example-tags").select2({
  tags: true,
  tokenSeparators: [',', ' ']
});
</script>   


<!-- bootstrap -->
</body>
</html>
